<template>
    <edu-collapse-item open @change="handleChange">
        <template slot="title-all">
            <view class="u-flex collapse-head">
                <view class="title u-line-1">{{ item.title }}</view>
                <u-icon
                    :class="{ active: isShow }"
                    class="icon"
                    color="#B7BAC1"
                    name="arrow-down"
                    size="24"
                ></u-icon>
                <view class="text" @tap.stop="handleChecked">
                    {{ checked ? '取消全选' : '全选' }}
                </view>
            </view>
        </template>
        <view class="u-flex collapse-content">
            <view
                class="item u-line-1"
                :class="[{ active: currentActive(items.id) }]"
                v-for="(items, index) in item.child"
                :key="index"
                @click="handleCollapseItem(items.id)"
            >
                {{ items.title }}
            </view>
        </view>
    </edu-collapse-item>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    props: {
        item: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    data() {
        return {
            isShow: true,
            list: [],
        }
    },
    computed: {
        ...mapGetters({
            globPrimary: 'designSetting/getGlobTheme',
            globPrimaryColor: 'designSetting/getGlobThemeColor',
        }),
        checked() {
            return this.item.child.length == this.list.length
        },
    },
    methods: {
        handleChange(e) {
            this.isShow = e.show
        },
        // 单选选择
        handleCollapseItem(id) {
            let data = this.list.filter((item) => item == id)
            if (this.$u.test.empty(data)) {
                this.list.push(id)
            } else {
                let index = this.list.findIndex((item) => item == id)
                this.list.splice(index, 1)
            }
            this.$emit('click', id)
        },
        // 全选
        handleChecked() {
            let item = this.item.child
            if (this.checked) {
                this.list = []
            } else {
                this.list = item.map((item) => item.id)
            }
            let list = this.item.child.map((item) => item.id)
            this.$emit('select', list, this.checked)
        },
        // 知识点选中状态
        currentActive(id) {
            return this.list.includes(id)
        },
        // 清空
        empty() {
            this.list = []
        },
    },
}
</script>
<style lang="scss" scoped>
.collapse-head {
    flex: 1;
    .title {
        font-size: 30rpx;
        font-weight: 500;
        color: #303133;
        max-width: 500rpx;
    }
    .icon {
        margin-left: 20rpx;
        transition: all 0.3s;
    }
    .active {
        transform: rotate(180deg);
        transform-origin: center center;
    }
    .text {
        margin-left: auto;
        font-size: 24rpx;
        color: #909399;
    }
}
.collapse-content {
    flex-wrap: wrap;
    .item {
        max-width: 232rpx;
        margin-bottom: 20rpx;
        margin-right: 24rpx;
        padding: 0 30rpx;
        height: 64rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #606266;
        line-height: 64rpx;
        background: #f7f7f7;
        border-radius: 32rpx;
    }
    .active {
        @include text-color;
    }
}
</style>
